<template>
    <div class="finance kpi-content-wrapper">
        <div class="kpi-select-wrapper"> <!-- 中间的下拉框 -->
            <!-- <el-select v-model="curOrg" placeholder="请选择组织" size="small" class="kpi-select">
                <el-option v-for="option in orgOptions" :label="option.name" :value="option.id" :key="option.id"></el-option>
            </el-select> -->
            <treeselect v-model="curOrg" style="width: 215px;" :multiple="false" :disable-branch-nodes="true" :show-count="true" :options="orgOptions" placeholder="请选择组织"  />
        </div>
        <div class="finance-chart"> <!-- 收费管理KPI -->
            <div class="left-chart-wrapper">
                <div class="data-panel-box">
                    <dataPanel v-for="(itemData, index) in panelDatas" :key="index" :itemData="itemData" />
                </div>
                <div class="chart-panel-box">
                    <circle-chart v-for="(chartData, index) in circleChartDatas" :key="index" :chartData="chartData" />
                </div>
            </div>
            <div class="right-chart-wrapper"> <!--右侧环形图-->
                <tipChart :chartData="chartData" v-if="chartData.echartData.length" />
            </div>
        </div>
    </div>    
</template>

<script>
    import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import circleChart from './child/circleChart';
    import dataPanel from './child/dataPanel';
    import tipChart from './child/tipChart';

    export default {
        name: 'finance',
        components: {
            Treeselect,
            circleChart,
            dataPanel,
            tipChart
        },
        data() {
            return {
                curOrg: null,
                orgOptions: [], // 机构列表
                panelDatas: [
                    { name: '本日收款（元）', num: '78,347', per: '20.78%', status: 1 },
                    { name: '本月收款（元）', num: '378,347', per: '18.8%', status: 1 },
                    { name: '本年收款（元）', num: '91,378,347', per: '18.8%', status: 0 }
                ],
                circleChartDatas: [
                    {
                        title: '累计清欠率',
                        colors: ['#288cd9', '#0443a3'],
                        resultData: {
                            data: 117.83,
                            name: '往年欠费（万元）'
                        },
                        datas: [
                            {
                                name: '往年未收',
                                value: 60
                            },
                            {
                                name: '今年收往年',
                                value: 100
                            }
                        ]
                    },
                    {
                        title: '本月收缴率',
                        colors: ['#288cd9', '#0443a3'],
                        resultData: {
                            data: 234.97,
                            name: '本月应收（万元）'
                        },
                        datas: [
                            {
                                name: '本月已收',
                                value: 60
                            },
                            {
                                name: '本月未收',
                                value: 100
                            }
                        ]
                    },
                    {
                        title: '本年收缴率',
                        colors: ['#AE59AF', '#090B72'],
                        resultData: {
                            data: 3590.16,
                            name: '本年应收（万元）'
                        },
                        datas: [
                            {
                                name: '本年已收',
                                value: 3000
                            },
                            {
                                name: '本年未收',
                                value: 590.16
                            }
                        ]
                    }
                ],
                chartData: {
                    title: '账龄分析',
                    echartData: []
                }
            }
        },
        mounted() {
            this.getOrgOptions();
            this.getChartData();
        },
        methods: {
            async getOrgOptions() {
                let resData = await this.$Geting('orgProjectTree.json');
                let loopFn = (itemObj) => {
                    let tempObj = {
                        id: itemObj.nodeId,
                        label: itemObj.nodeName
                    }
                    if (itemObj.nodeType === '5') {
                        return tempObj;
                    } else {
                        let childList = itemObj.childList || []
                        tempObj.children = [];
                        for (let x in childList) {
                            tempObj.children.push(loopFn(childList[x]))
                        }
                    }
                    return tempObj;
                }
                
                if (resData.code === '0') {
                    let result = loopFn(resData.data.treeData);
                    this.orgOptions = [result];
                }
                
            },
            async getChartData() { // 房屋状态的图表的数据
                /* let params = {
                    appId: '134',
                    memberId: '2167', //this.$utils.getCookie('work_orgMemberId'),
                    tenantId: '1025' // this.$utils.getCookie('work_orgId') // 租户Id从哪获取
                };
                let res = await this.$Geting(this.$api.agingAnalysis, params);
                if (res.code === '0') {
                    console.log(res.data);
                    let resData = res.data;
                    let tempArr = [{
                            name: "3个月内",
                            value: resData.oneThreeMoney * 1
                        },
                        {
                            name: "4~6个月",
                            value: resData.fourSixMoney * 1
                        },
                        {
                            name: "7~12个月",
                            value: resData.sevenOneMoney * 1
                        },
                        {
                            name: "1~2年",
                            value: resData.oneTwoMoney * 1
                        },
                        {
                            name: "2~3年",
                            value: resData.twoThreeMoney * 1
                        },
                        {
                            name: "3年以上",
                            value: resData.threeMoreMoney * 1
                        }
                    ];
                    this.agingChartData = tempArr;
                } */
                this.chartData = {
                    title: '账龄分析',
                    echartData: [
                        { name: '3个月内', value: 12.22 },
                        { name: '4~6个月', value: 9.78 },
                        { name: '7~12个月', value: 6.33 },
                        { name: '1~2年', value: 4.21 },
                        { name: '2~3年', value: 2.37 },
                        { name: '3年以上', value: 2.37 }
                    ]
                }
            },
        }
    }
</script>

<style lang="scss">
.finance {
    .kpi-select-wrapper { // 上面的select部分
        margin-bottom: 25px;
    }
    .finance-chart { // 图表部分
        height: 616px;
        display: flex;
        .left-chart-wrapper {
            width: 738px;
            height: 100%;
            .data-panel-box { // 3个不同背景的数据框
                display: flex;
                justify-content: space-between;
                .data-panel {
                    margin-right: 8px;
                    flex: 1;
                    height: 150px;
                    color: #fff;
                    border-radius: 8px;
                    box-shadow: 0px 6px 4px rgba(0,0,0, .2);
                    box-sizing: border-box;
                    background: url(./imgs/card1.png) no-repeat;
                    background-size: 100% 100%;
                    padding: 28px 16px 15px;
                    &:last-child {
                        margin-right: 0;
                    }
                    &:nth-child(2) {
                        background-image: url(./imgs/card2.png);
                    }
                    &:nth-child(3) {
                        background-image: url(./imgs/card3.png);
                    }
                    h3 {
                        font-weight: 400;
                        font-size: 16px;
                        height: 24px;
                        line-height: 24px;
                    }
                    .panel-data {
                        height: 48px;
                        line-height: 48px;
                        font-size: 32px;
                        font-family: Helvetica;
                    }
                    .data-compare {
                        height: 24px;
                        line-height: 24px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        span {
                            &.txt {
                                color:rgba(255,255,255, .65);
                                margin-right: 5px;
                            }
                            &.per {
                                color:rgba(255,255,255, .85);
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
            .chart-panel-box {
                margin-top: 16px;
                height: calc(100% - 166px);            
                display: flex;
                justify-content: space-between;
                .chart-panel {
                    margin-right: 8px;
                    flex: 1;
                    height: 100%;
                    background: #f7f8fa;
                    border-radius: 4px;
                    box-sizing: border-box;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
        .right-chart-wrapper {
            flex: 1;
            height: 100%;
            .account-age-chart {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>